<template>
	<view v-if="orderInfo" style="overflow-x: hidden;">
		<view class="nav-back">
			<top-heigth backTitle="订单详情"></top-heigth>
		</view>
		
		<!-- -------- -->
		<view class="content-box m-b16 m-t16">
			<view class="detail-box detail-top">
				<view class="">
					订单编号：12345677
				</view>
				<view class="blue">待接单</view>
			</view>
		</view>
		<view class="content-box m-b16 m-t16">
			<view class="public-box" style="padding-bottom: 0; overflow: hidden;">
				<h1 class="order-h1">用户信息</h1>
				
				<view class="detail-box">
					<view class="detail-font2">
						<view class="left" style="width: 120rpx;">服务地址：</view>
						<view class="right" style="width: 400rpx;">{{orderInfo.userAddress}}</view>
					</view>
					<view class="detail-font2-l" style="min-width: 95rpx;" @click="toMapAPP">
						<image class="icon" src="/static/image/detail-address.png"></image>
						<view>导航</view>
					</view>
				</view>
				<view class="detail-box">
					<view class="detail-font2">
						<view class="left" style="width: 120rpx;">用户姓名：</view>
						<view class="right">{{orderInfo.userName}}</view>
					</view>
					<view class="detail-font2-l" @click="callPhone(orderInfo.userMobile)" style="min-width: 95rpx;">
						<image class="icon" src="/static/image/detail-phone.png"></image>
						<view>联系</view>
					</view>
				</view>
				<uv-line color="#eeeeee"></uv-line>
				<view class="detail-yu">预约时间：{{orderInfo.serviceReservedTime}}</view>
				<!-- <view class="detail-box" v-if="orderInfo.serviceReservedTime != '' && orderInfo.serviceReservedTime != null">
					<view class="detail-font2">
						<view class="left">预约时间：</view>
						<view class="right">{{orderInfo.serviceReservedTime}}</view>
					</view>
				</view> -->
			</view>
		</view>
		
		
		<view class="content-box m-b16 m-t16">
			<view class="public-box" style="padding-bottom: 0; overflow: hidden;">
				<h1 class="order-h1">服务人员信息</h1>
				<view class="people-box">
					<view class="people-img"><image class="icon" src="/static/image/mine-head.png"></image></view>
					<view class="people-font">
						<view class="people-font-h1">赵娜娜</view>
						<view class="people-font-all">
							<view class="people-all-l">
								<view class="m-r16">000岁</view>
								<view>接单000</view>
							</view>
							<view class="people-all-r">
								<view class="people-phone m-r16">电话</view>
								<view class="people-now">在线联系</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="content-box m-b16">
			<view class="public-box" style="padding-bottom: 0; overflow: hidden;">
				<h1 class="order-h1">服务信息</h1>
				<view>
					<!-- <image class="bannner" :src="orderInfo.tAppServiceVo.serviceImage" mode="widthFix"></image>
					<h1 class="server-h1">{{orderInfo.tAppServiceVo.serviceName}}</h1> -->
					<image class="bannner" src="/static/image/back.png" mode="widthFix"></image>
					<h1 class="server-h1">名称称称称称称称称称称称称称称称称称称称称称称称</h1>
					<view class="money-number">
						<view class="money-box">
							交通费：
							<view class="red">
								<span class="goods-span-red">¥</span>{{orderInfo.postAmount}}
							</view>
						</view>
						<view class="money-box">
							服务金额：
							<view class="red">
								<span class="goods-span-red">¥</span>00000 <!-- {{orderInfo.orderAmount}} -->
							</view>
						</view>
					</view>
					<uv-line color="#eeeeee"></uv-line>
					<view class="money-number" style="display: flex; justify-content: flex-end; margin-top: 20rpx;">
						<view class="money-box">
							实收金额：：
							<view class="red">
								<span class="goods-span-red">¥</span>000000
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="content-box m-b16">
			<view class="public-box" style="padding-bottom: 0; overflow: hidden;">
				<h1 class="order-h1">订单信息</h1>
				<view class="detail-box" v-if="orderInfo.orderCode != '' && orderInfo.orderCode != null">
					<view class="detail-font2">
						<view class="left">订单编号：</view>
						<view class="right">{{orderInfo.orderCode}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.createTime != '' && orderInfo.createTime != null">
					<view class="detail-font2">
						<view class="left">下单时间：</view>
						<view class="right">{{orderInfo.createTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.staffTakeTime != '' && orderInfo.staffTakeTime != null">
					<view class="detail-font2">
						<view class="left">接单时间：</view>
						<view class="right">{{orderInfo.staffTakeTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.serviceStartTime != '' && orderInfo.serviceStartTime != null">
					<view class="detail-font2">
						<view class="left">开始服务时间：</view>
						<view class="right">{{orderInfo.serviceStartTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.serviceEndTime != '' && orderInfo.serviceEndTime != null">
					<view class="detail-font2">
						<view class="left">服务完成时间：</view>
						<view class="right">{{orderInfo.serviceEndTime}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="content-box m-b16 m-t24">
			<view class="public-box" style=" overflow: hidden;">
				<view class="detail-yu2 blue m-b16" style="">服务人员薪资00000元</view>
				<view class="detail-box" v-if="orderInfo.orderCode != '' && orderInfo.orderCode != null">
					<view class="detail-font2">
						<view class="left">订单编号：</view>
						<view class="right">{{orderInfo.orderCode}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.createTime != '' && orderInfo.createTime != null">
					<view class="detail-font2">
						<view class="left">下单时间：</view>
						<view class="right">{{orderInfo.createTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.staffTakeTime != '' && orderInfo.staffTakeTime != null">
					<view class="detail-font2">
						<view class="left">接单时间：</view>
						<view class="right">{{orderInfo.staffTakeTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.serviceStartTime != '' && orderInfo.serviceStartTime != null">
					<view class="detail-font2">
						<view class="left">开始服务时间：</view>
						<view class="right">{{orderInfo.serviceStartTime}}</view>
					</view>
				</view>
				<view class="detail-box" v-if="orderInfo.serviceEndTime != '' && orderInfo.serviceEndTime != null">
					<view class="detail-font2">
						<view class="left">服务完成时间：</view>
						<view class="right">{{orderInfo.serviceEndTime}}</view>
					</view>
				</view>
				<!-- <view class="detail-yu2">用户下单时间：{{orderInfo.createTime}}</view> -->
			</view>
		</view>
		<view class="order-bottom">
			<view class="goods-bottom-r">
				<view class="goods-bottom-but">更换服务人员</view>
			</view>
		</view>
		
		
		<!-- -------- -->
		<view style="height: 160rpx;"></view>
		
		<!-- 底部按钮 -->
		<!-- <view class="order-bottom" >
			<view class="goods-bottom-r">
				<view v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1" @click="callPhone(orderInfo.tAppSupplierVo.shopTel)" class="goods-bottom-but">联系商家</view>
				<view v-if="orderInfo.orderStatus == 0" @click="refuse(orderInfo.id,orderInfo.version)" class="goods-bottom-but">拒绝</view>
				<view v-if="orderInfo.orderStatus == 0" @click="agree(orderInfo.id,orderInfo.version)" class="goods-bottom-but">接单</view>
				<view v-if="orderInfo.orderStatus == 1&& !orderInfo.serviceStartTime" class="goods-bottom-but" @click="toMapAPP">去打车{{orderInfo.orderStatus}}</view>
				<view v-if="orderInfo.orderStatus == 1 && !orderInfo.serviceStartTime" @click="start(orderInfo.id,orderInfo.version)" class="goods-bottom-but">开始服务</view>
				<view v-if="orderInfo.orderStatus == 1 && orderInfo.serviceStartTime" @click="finish(orderInfo.id,orderInfo.version)" class="goods-bottom-but">服务完成</view>
				<view v-if="orderInfo.orderStatus == 2" @click="lahei" class="goods-bottom-but">拉黑用户</view>
				<view v-if="orderInfo.orderStatus == 2" @click="pingjia" class="goods-bottom-but">查看评价</view>
			</view>
		</view> -->

	</view>

</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				num:1,
				orderInfo: null,
				id: null,
				version:'',
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.getOrder()
		},
		methods: {
			callPhone(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			openModal() {
				this.$refs.modal.open();
			},
			getOrder(type) {
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/turnTAppOrderInfo',{
					id: this.id,
				}).then((res) => {
					this.orderInfo = res.data
					this.id = res.data.id
					this.version = res.data.version
				}) 
			},
			lahei() {
				uni.showModal({
					title: '提示',
					content: '拉黑后您将不在收到此用户的订单，是否拉黑?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/api/shop/v1_0/tAppUserBlackRCA/insertTAppUserBlack',{
									staffId:this.orderInfo.staffId,
									userId:this.orderInfo.userId,
									isOn: 1
							}).then((res) => {
								if(res.code == 200){
									 uni.showToast({
									 	icon: "none",
									 	title: "拉黑成功"
									 })
									 setTimeout(() => {
									 	this.getOrder()
									 }, 500)
								}else{
									uni.showToast({
										icon: "none",
										title: "拉黑失败"
									})
								}
							}) 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			refuse(id,version) { //拒绝接单
				uni.showModal({
					title: '提示',
					content: '确定拒绝订单吗?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/updateTAppOrderRefused',{
									id:id,
									version:version,
							}).then((res) => {
								if(res.code == 200){
									 uni.showToast({
									 	icon: "none",
									 	title: "拒绝成功"
									 })
									 setTimeout(() => {
									 	this.getOrder()
									 }, 500)
								}else{
									uni.showToast({
										icon: "none",
										title: "拒绝失败"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			agree(id,version) { //同意接单
				uni.showModal({
					title: '提示',
					content: '确定接单吗?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/updateTAppOrderStart',{
									id:id,
									version:version,
							}).then((res) => {
								if(res.code == 200){
									 uni.showToast({
									 	icon: "none",
									 	title: "接单成功"
									 })
									 setTimeout(() => {
									 	this.getOrder()
									 }, 500)
								}else{
									uni.showToast({
										icon: "none",
										title: "接单失败"
									})
								}
							}) 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			start(id,version) { //开始服务
				uni.showModal({
					title: '提示',
					content: '确定开始服务吗?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/updateTAppOrderServiceStart',{
									id:id,
									version:version,
							}).then((res) => {
								if(res.code == 200){
									 uni.showToast({
									 	icon: "none",
									 	title: "服务已开始"
									 })
									 setTimeout(() => {
									 	this.getOrder()
									 }, 500)
								}else{
									uni.showToast({
										icon: "none",
										title: "服务开始失败 请重新点击"
									})
								}
							}) 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			finish(id,version) { //完成服务
				uni.showModal({
					title: '提示',
					content: '确定完成服务吗?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/updateTAppOrderServiceFinish',{
									id:id,
									version:version,
							}).then((res) => {
								if(res.code == 200){
									 uni.showToast({
									 	icon: "none",
									 	title: "服务已完成"
									 })
									 setTimeout(() => {
									 	this.getOrder()
									 }, 500)
								}else{
									uni.showToast({
										icon: "none",
										title: "服务完成失败 请重新点击"
									})
								}
							}) 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toMapAPP(){
				var latitude	= this.orderInfo.userLat
				var longitude	= this.orderInfo.userLng
				var name		= this.orderInfo.userAddress
				let url = "";
				if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			},
			pingjia(){
				uni.navigateTo({
					url: "/pages/index/evaluate?orderCode=" + this.orderInfo.orderCode
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	
	.order-h1{
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		margin-bottom: 24rpx;
	}
	.order-h1-font{
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
	}
	.detail-font2{
		@include flex;
		justify-content:flex-start; 
		font-size: 24rpx;
		.left{
			width: 170rpx;
			color: #333;
		}
		.right{
			color: #333;
			
		}
	}
	.detail-box{
		@include flex;
		align-items: center;
		justify-content:space-between; 
		margin-bottom: 32rpx;
	}
	.detail-font2-l{
		@include flex;
		align-items: center;
		justify-content:flex-start; 
		
		font-size: 24rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	.bannner{
		width: 100%;
		margin-bottom: 16rpx;
	}
	.server-h1{
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 15rpx;
	}
	.money-number{
		@include flex;
		align-items: center;
		justify-content:space-between;
		padding-bottom: 30rpx;
	}
	.money-box{
		@include flex;
		align-items: end;
		justify-content:flex-start;
		font-size: 24rpx;
		.red{
			color: #F82727;
			font-size: 34rpx;
			font-weight: bold;
			margin-right: 16rpx;
			span{
				font-size: 26rpx;
			}
		}
	}
	
	
	.order-bottom{
		padding: 0 32rpx;
		/*background: #fff;
		 position: fixed;
		bottom: 0;
		width: calc(100% - 64rpx); */
		/* height: 100rpx; */
		
		@include flex;
		align-items: center;
		justify-content:flex-end; 
		.goods-bottom-r{
			@include flex;
			align-items: center;
			justify-content:space-between;
			.goods-bottom-but{
				width: 218rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				color: #fff;
				background: #27A0FF;
				border-radius:8rpx;
				text-align: center;
				margin-left: 16rpx;
				margin-top:26rpx;
				margin-bottom:26rpx;
			}
		}
	}
	.detail-top{
		margin-top: 35rpx;
		font-size: 24rpx;
		color: #999;
	}
	.order-h1{
		font-size: 30rpx;
	}
	.detail-yu{
		font-size: 24rpx;
		color: #333;
		margin: 30rpx 0;
	}
	.detail-yu2{
		font-size: 24rpx;
		color: #333;
	}
	.people-box{
		@include flex;
		align-items: center;
		justify-content:flex-start;
		padding-bottom: 30rpx;
		.people-img{
			width:80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 20rpx;
			.icon{
				width:80rpx;
				height: 80rpx;
			}
		}
		.people-font{
			width: calc(100% - 100rpx);
			.people-font-h1{
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
			.people-font-all{
				@include flex;
				align-items: center;
				justify-content:space-between;
			}
			.people-all-l,.people-all-r{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				font-size: 24rpx;
				color: #666;
				margin-top: 8rpx;
			}
			/* .people-all-l{
				
			} */
			.people-all-r{
				color: #278FFF;
				.people-phone{
					padding-left:30rpx;
					background:url("/static/image/people-phone.png") left center no-repeat;
					background-size:23rpx 28rpx;
				}
				.people-now{
					padding-left:30rpx;
					background:url("/static/image/people-now.png") left center no-repeat;
					background-size:28rpx 25rpx;
				}
			}
		}
	}
</style>
